<template>
  <view>
    <!-- <view class="" style="width: 100%;position: absolute;z-index: 9999999;">
      <view class="rowscl rowsm" style="width: 100%;padding-left: 40rpx;margin-bottom: 20rpx;">
        <view class="" style="width: 100%;" :style="{height:h2 + 'px'}"></view>
        <view class="rowsb rowsm" style="width: 100%;">
          <image src="/static/jt.png" class="" style="width: 20rpx;height: 30rpx;margin-right: 120rpx;" mode="" @click="back()"></image>
          <view class="w-300">
            <input type="text" class="w-300" placeholder="请输入搜索内容" @confirm="getList(2)" v-model="title">
          </view>
          
          
          <image src="/static/icon_4_jia.png" style="width: 40rpx;height: 40rpx;" mode="" @click="$tools.goNext('/pages/homepages/applyVideo')"></image>
        </view>
      </view>
      <uni-notice-bar single="" :text="txt" backgroundColor="rgba(51,51,51,.2)" color="#fff" scrollable showIcon></uni-notice-bar>
    </view> -->
    
    <view class="w100 fixed" style="top: 0;left: 0;z-index: 9999;">
      <uni-nav-bar left-icon="back" title="短视频" backgroundColor="rgba(0, 0, 0, 0)" color="#fff" class="fw-b" :border="false" @clickLeft="$tools.goBack()"></uni-nav-bar>
      <view class="w100 rowsb rowsm pl-24 pr-32">
        <view class="w-606 h-72 br-36 pl-26 pr-10 rowsb rowsm" style="background-color: rgba(255, 255, 255, .5);">
          <view class="rows rowsm">
            <image src="/static/icon_osbc-1.png" class="w-36 h-36 mr-10" mode=""></image>
            <input type="text" placeholder="请输入内容" placeholder-class="colfff">
          </view>
          <view class="w-114 h-56 br-28 rowsc rowsm colfff fs-26" style="background: linear-gradient(to bottom,#4897FF,#4878FF);">搜索</view>
        </view>
        <image src="/static/icon_s.png" class="w-56 h-56" mode="" @click="choseVideo()"></image>
      </view>
    </view>
    
    <swiper vertical :interval="3000" circular :duration="1000" :current="videoIndex" style="width: 100%;height: 100vh;" @change="changeVideo">
      <swiper-item v-for="(item,index) in list" style="position: relative;" :key="index">
        <view class="rowscl rowsm" style="right: 30rpx;position: absolute;font-size: 26rpx;color: #fff;" :style="{top:`${h / 2}px`}">
          <view class="rowscl rowsm" style="margin-bottom: 86rpx;" @click="good(item)">
            <image :src="item.isPraise == 1  ? '/static/icon_b-1.png' : '/static/icon_b-2.png'" class="" style="width: 52rpx;height: 52rpx;margin-bottom: 12rpx;" mode=""></image>
            <view class="">{{item.countPraise}}</view>
          </view>
          <view class="rowscl rowsm" style="margin-bottom: 84rpx;" @click="$refs.popup.open(),getSpeakList(item.id),choseItem = item">
            <image src="/static/icon_oub.png" mode="" style="width: 52rpx;height: 52rpx;margin-bottom: 12rpx;"></image>
            <view class="">{{item.countReview}}</view>
          </view>
          
          <image src="/static/icon_i.png" mode="" style="width: 52rpx;height: 52rpx;margin-bottom: 12rpx;"></image>
          <!-- <view class="rowscl rowsm" @click="collect(item)">
            <image :src="item.isCollect == 1 ? '/static/icon_sc-1.png' : '/static/icon_4_sc.png'" mode="" style="width: 56rpx;height: 56rpx;margin-bottom: 4rpx;"></image>
            <view class="">{{item.collectCount}}</view>
          </view> -->
        </view>
        
        <view class="rowscl" style="left: 32rpx;bottom: 100rpx;position: absolute;">
          <view class="" style="font-size: 32rpx;color: #fff;margin-bottom: 16rpx;font-weight: bold;">{{item.nickName}}/{{item.title}}</view>
          <view class="" style="font-size: 26rpx;color: #fff;">{{item.content}}</view>
        </view>
        <video :src="item.video" :controls="false" :enable-progress-gesture="false" style="width: 100%;height: 100%;" :id="`video${index}`" v-if="videoIndex <= index + 1 && videoIndex >= index - 1" @click="pauseVideo(`video${index}`,1)"></video>
      </swiper-item>
    </swiper>
    
    <uni-popup ref="popup" type="bottom">
      <view class="pt-32" style="width: 100%;height: 790rpx;background-color: #fff;border-radius: 60rpx 60rpx 0 0;">
        <view class="rows rowsm mb-38" style="width: 100%;padding-left: 32rpx;padding-right: 30rpx;">
          <view class="rows rowsm">
            <image src="/static/icon_pl.png" style="width: 40rpx;height: 40rpx;margin-right: 12rpx;" mode=""></image>
            <view class="" style="font-weight: bold;color: #333;font-size: 30rpx;">评论</view>
          </view>
        </view>
        
        <scroll-view scroll-y="true" class="pl-30 pr-48" style="height: 558rpx;width: 100%;">
          <view class="rows pb-28 mb-32" style="border-bottom: 2rpx solid rgba(51, 51, 51, .1);" v-for="(item,index) in speakList" :key="index">
            <view class="rowscl w100">
              <view class="w100 rowsb rowsm">
                <view class="rows rowsm">
                  <image :src="item.userImage" style="width: 80rpx;height: 80rpx;border-radius: 40rpx;margin-right: 20rpx;" mode=""></image>
                  <view class="" style="font-size: 24rpx;font-weight: bold;color: #333;margin-bottom: 8rpx;">{{item.nickName}}</view>
                </view>
                <view class="mb-16" style="font-size: 20rpx;color: #888;">{{item.createTime}}</view>
              </view>
              <view class="fs-24 col333">{{item.content}}</view>
            </view>
          </view>
        </scroll-view>
        
        <view class="rowsb rowsm pr-30" style="width: 100%;">
          <view class="w-640 h-76 br-38 pl-32 pr-32 rows rowsm" style="background-color: #F7F6FA;">
            <image src="/static/icon_74bj.png" class="w-36 h-36 mr-12" mode=""></image>
            <input type="text" placeholder="留下你精彩的评论吧" placeholder-style="fs-28 col888" v-model="speakContent" @confirm="submitSpeak">
          </view>
          <view class="" @click="submitSpeak">发送</view>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        txt:'',
        h:uni.getSystemInfoSync().windowHeight,
        h2:uni.getSystemInfoSync().statusBarHeight,
        list:[],
        speakContent:'',
        speakList:[],
        itemID:'',
        videoIndex:0,
        choseItem:{},
        isShowSearch:false,
        title:'',
        id:'',
        isPlay:true
      };
    },
    onLoad(e) {
      if(e){
        this.id = e.id
      }
      this.getList(1)
    },
    methods:{
      choseVideo(){
        uni.chooseVideo({
          success: (res) => {
            uni.uploadFile({
              url:this.$tools.httpOne + 'utils/ossUpload',
              filePath:res.tempFilePath,
              name:'file',
              success: (res1) => {
                console.log(JSON.parse(res1.data).url)
                this.$tools.goNext('/pagesCopy/video/publish?url=' + JSON.parse(res1.data).url)
              }
            })
          }
        })
      },
      submitSpeak(){
        let that = this
        if(!this.speakContent) return this.$tools.showtt('请输入评论内容')
        this.$tools.axiosFromToken('POST','prosp/review',{pId:this.choseItem.id,content:this.speakContent},'加载中').then(res => {
          this.$tools.showtt(res.msg)
          if(res.code != 200) return
          setTimeout(() => {
            that.getSpeakList(that.choseItem.id)
            that.choseItem.countReview ++ 
            that.speakContent = ''
          },1000)
        })
      },
      getSpeakList(id){
        this.$tools.axiosFromToken('POST','prosp/listReview',{pId:id},'加载中').then(res => {
          if(res.code != 200) return this.$tools.showtt(res.msg)
          let {rows} = res
          this.speakList = rows
        })
      },
      back(){
        console.log(1111)
        // this.$tools.goBack(1)
        uni.switchTab({
          url:'/pages/tabBar/index'
        })
      },
      getList(i){
        let title = ''
        let id = ''
        if(this.title) title = this.title
        if(this.id) id = this.id
        this.$tools.axiosFromToken('POST', 'prosp/list', {id:id,title:title}).then(res => {
          if(res.code != 200) return this.$tools.showtt(res.msg)
          let {rows} = res
          this.list = rows
          if(i == 2){
            this.videoIndex = 0
          }
          if(i == 1){
            this.start()
          }
        })
      },
      start(){
        const videoObj = uni.createVideoContext('video0')
        videoObj.play()
      },
      changeVideo(e){
        console.log(e)
        this.videoIndex = e.detail.current
        let id = `video${e.detail.current}`
        this.playVideo(id)
        if(e.detail.current - 1 >= 0){
          let backID = `video${e.detail.current - 1}`
          this.pauseVideo(backID)
        }
        if(e.detail.current + 1 < this.list.length){
          let nextID = `video${e.detail.current + 1}`
          this.pauseVideo(nextID)
        }
      },
      playVideo(id,i){
        const videoObj = uni.createVideoContext(id)
        videoObj.play()
        if(i == 1) {
          this.isPlay = true
        }
      },
      pauseVideo(id,i){
        if(i == 1) {
          if(!this.isPlay){
            return this.playVideo(id,1)
          }
          this.isPlay = false
        }
        const videoObj = uni.createVideoContext(id)
        videoObj.pause()
      },
      good(item){
        let that = this
        this.$tools.axiosFromToken('POST','prosp/updatePraise',{pId:item.id},'加载中').then(res => {
          this.$tools.showtt(res.msg)
          if(res.code != 200) return
          if(item.isPraise == 1) {
            item.isPraise = 0
            item.praiseCount --
          }else {
            item.isPraise = 1
            item.praiseCount ++
          }
          // setTimeout(() => {
          //   that.getList()
          // },1000)
        })
      },
      collect(item){
        let that = this
        this.$tools.axiosFromToken('POST','prosp/updateCollect',{pId:item.id},'加载中').then(res => {
          this.$tools.showtt(res.msg)
          if(res.code != 200) return
          if(item.isCollect == 1) {
            item.isCollect = 0
            item.collectCount --
          }else {
            item.isCollect = 1
            item.collectCount ++
          }
          // setTimeout(() => {
          //   that.getList()
          // },1000)
        })
      }
    }
  }
</script>

<style lang="scss">
.rowscl {
  display: flex;
  display: -webkit-flex;
  justify-content: center;
  flex-direction: column;
}
.rowsm {
  align-items: center;
}
.rows {
  display: flex;
  display: -webkit-flex;
  flex-direction: row;
}  /* 盒子内容横向布局 */
.rowsb {
  display: flex;
  display: -webkit-flex;
  flex-direction: row;
  justify-content: space-between;
}
view {
  z-index: 1;
}
</style>
